<template>
  <div class="timeSelect">
    <headNav :title="'自定义时间查询'"></headNav>
    <div class="timeScope">
      <div class="timeFormat" @click="handelTimeSelse(0)">{{startTime}}</div>
      <div class="timeLine"></div>
      <div class="timeFormat" @click="handelTimeSelse(1)">{{endTime}}</div>
    </div>
    <action-sheet v-model="isShow">
      <DatetimePicker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        @confirm="handelConfirm"
        @cancel="handelCancel"
      />
    </action-sheet>
    <div class="confirmBtn">
        <Button type="info" block @click="handelSeek">查询</Button>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import { ActionSheet,DatetimePicker,Toast,Button } from 'vant';
import { string } from '@/util/public';
import '@/util/timeFormat'
export default {
    name:'timeSelect',
    components:{
      headNav,
      ActionSheet,
      DatetimePicker,
      Toast,
      Button
    },
    data() {
      return {
        isShow:false,
        active: 0,
        startTime:'起始日期',
        endTime:'结束日期',
        minDate: new Date(2010, 0, 1),
        //maxDate: new Date(2050, 0, 1),
        currentDate: new Date(),
      };
    },
    computed:{
        currentPage(){
            return this.$store.state.studentAppraise.currentPage;
        }
    },
    methods:{
      //时间选择
      handelTimeSelse(val){
        this.active = val;
        this.isShow = true;
      },
      //确定
      handelConfirm(){
        this.isShow = false;
        let timeFormat = new Date(this.currentDate).format("yyyy-MM-dd");
        if(this.active == 0){
          this.startTime = timeFormat;
        }else{
          this.endTime = timeFormat;
        }

        let startTime = Number(string.replaceAll(String(this.startTime),'-',''));
        let endTime = Number(string.replaceAll(String(this.endTime),'-','')); 
        if(startTime > endTime){
          return Toast('起始日期，不能大于结束日期')
        }

        if( this.startTime == '起始日期' || this.endTime == '结束日期'){
          return
        }

        //首页时间选择
        if(this.currentPage == 0){
          this.$store.state.studentAppraise.startTime = this.startTime;
          this.$store.state.studentAppraise.endTime = this.endTime;
        }
        //得分明细时间选择
        if(this.currentPage == 1){
          this.$store.state.studentAppraise.scoreInfo_startTime = this.startTime;
          this.$store.state.studentAppraise.scoreInfo_endTime = this.endTime;
        }
      },
      //关闭
      handelCancel(){
        this.isShow = false;
      },
      //查询
      handelSeek(){
        if(this.startTime == '起始日期'){
          return Toast('请选择起始日期')
        }
        if(this.endTime == '结束日期'){
          return Toast('请选择结束日期')
        }
        this.$router.go(-1);
      }
    }
}
</script>

<style lang="less" scoped>
.timeSelect{
  height:100%;
  position: relative;
  .timeScope{
    background-color:#fff;
    box-sizing: border-box;
    padding:0.2rem 0.26rem;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    .timeFormat{
      flex: 1;
      height:0.54rem;
      line-height:0.54rem;
      border:0.01rem solid #ccc;
      box-sizing: border-box;
      padding-left: 0.15rem;
      color: #999;
    }
    .timeLine{
        height: 1px;
        width: 0.76rem;
        background-color: #ccc;
        margin: 0 0.3rem;
    }
  }
  .datetimePicker{
    width:100%;
    position: absolute;
    bottom:0;
  }
  .confirmBtn{
    position: fixed;
    bottom:0;
    width:100%;
  }
}
</style>

